/* 
使用状态提升 实现兄弟组件通信
实现思路： 借助状态提升机制， 通过共同的父组件进行兄弟组件的数据传递
- A组件先通过子传父的方式把数据传给父组件APP
- APP拿到数据后通过父传子把数据传给子组件B

需求：把A组件当中的name变量传给B
*/

import { useState } from "react";

// A组件
const A = ({ onGetName }) => {
	const [name, setName] = useState("ts");
	return (
		<div>
			<button onClick={() => onGetName(name)}>send</button>
		</div>
	);
};

const B = ({ name }) => {
	return <div>我是B组件 我接收A组件的值是：{name}</div>;
};

function App() {
	const [name, setName] = useState("");

	const getName = name => setName(name);

	return (
		<div className="app">
			<A onGetName={getName} />
			<B name={name} />
		</div>
	);
}

export default App;
